<template>
  <vue-draggable-resizable
    :w="dragStyles.w"
    :h="dragStyles.h"
    :min-width="360"
    :min-height="445"
    :max-width="1900"
    :max-height="1000"
    :parent="false"
    :active="true"
    :x="dragStyles.x"
    :y="dragStyles.y"
    :z="999"
    class-name="drag-data-table-panel"
    class-name-handle="my-handle-class"
    @resizing="onResize"
    @dragging="onDrag"
  >
    <div id="data-table" class="data-table">
      <div class="title">
        <p :title="searchValue" @dblclick="openSearchInfo">
          {{searchValue}}
        </p>
        <i class="close el-icon-close" @click="close"></i>
        <i class="close el-icon-zoom-in" @click="changeSize"></i>
      </div>
      <div class="nav" style="padding:0 10px;">
        <el-row>
          <el-col :span="12">
            <el-select 
            class="pos" 
            multiple 
            collapse-tags
            v-model="num_codes" 
            popper-class="idenNumSelectPopper"
            size="small"
            @change="getSearchSum" 
            :popper-append-to-body="false">
              <el-option
                v-for="item in numData"
                :key="item.idenCode"
                :label="item.idenName"
                :value="item.idenCode"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              class="pos"
              style="margin-left:10px;"
              v-model="changeNum"
              size="small"
              @change="getSearchSum"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in iden_enu_data"
                :key="item.idenCode"
                :label="item.idenName"
                :value="item.idenCode"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="table-container">
        <vxe-grid
          ref="xTable"
          border='full'
          :stripe="true"
          :resizable="false"
          :auto-resize="false"
          show-overflow="tooltip"
          :column-min-width="100"
          height="95%"
          :highlight-hover-row="true"
          :highlight-current-row="true"
          size="mini"
          align="center"
          :row-id="'区划'"
          :columns="queryTableData.tableLegend"
          :data="queryTableData.tableData"
          @cell-mouseenter="vxeTableCellMouseenter"
          @cell-dblclick="updateRegion"
        ></vxe-grid>
      </div>
    </div>
  </vue-draggable-resizable>
</template>

<script>
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import microConfig from "static/config/micro.js";
import axios from "axios";
import * as microAPI from "@/pages/micro/api/micro.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

// 给 vue 实例挂载全局窗口对象
Vue.prototype.$XModal = VXETable.modal

export default {
  name: "Table",
  data() {
    return {
      dragStyles:{//面板样式
        x: document.documentElement.clientWidth - 410,
        y: 60,
        w:360,
        h:445
      },

      target: 1,
      num_codes: [],
      echartsData: {},
      queryTableData: {//表格参数
        tableLegend: [
          { name: "区划", value: "NAME" },
          { name: "总计", value: "NAME" },
        ],
        tableData: [],
        tableName: ""
      },
      tableWidth: "330",
      changeEchartsStyle: false,
      echartsStyle: "pie",
      tableVisible: false,
      tableData: [],
      changeNum: "all",//分组
      numData: [{ idenCode: "COUNT", idenName: "单位数量" }],
      myChart: null,

      iden_enu_data: [
        //所有枚举指标和对应的全部数据
        { idenName: "全部", idenCode: "all" }
      ], //枚举数据
      selected: {
        //选中的数字指标和枚举指标
        iden_num_codes: "COUNT", //数字指标
        iden_num_arr:[],//选中的数字指标
        iden_enu_code: "B0010031", //枚举指标
        iden_enu_index: 0 //选中的枚举指标索引
      },
      iden_num_codes: [], //所有的数字指标
      selectedSearchParams: {},
      selectedSearchData: {},
      maplevel: 3,
      doZoom: false, //默认不是区划变更
      map: {
        currentZoom: 4 //地图当前等级
      }, //当前地图
      region:{//区划参数
        rcid:'',//区划版本
      },
      searchValue:"",//查询条件
    };
  },
  beforeCreate() {},
  computed: {
    ...mapState({
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showQueryTableLayer: state => state.micro.showQueryTableLayer,
      showTypeTabLayer: state => state.micro.showTypeTabLayer,
      queryTable: state => state.micro.queryTable,
      enlargeChart: state => state.micro.enlargeChart,
      showMapControl: state => state.micro.showMapControl,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showMapTableLayer: state => state.micro.showMapTableLayer,
      enlargeTable: state => state.micro.enlargeTable
    })
  },
  mounted() {
    EventBus.$on("refreshBoundaryFeaturesComplete", () => {
      setTimeout(() => {
        this.doZoom = false;
        const map = sgisMapBase.getMap();
        let zoom = Math.round(map.getZoom());
        this.map.currentZoom = zoom; //重置地图等级
      }, microConfig.openZoomEndTime);
    });
    EventBus.$on(
      "updateMicroSearch",
      (microSearchParams, selectedSearchParams, type) => {
        if (type == "upOrDownDirr") {
          //下钻
          this.doZoom = true;
        }
        this.region.rcid = selectedSearchParams.regions.rcid;

        this.selectedSearchParams = selectedSearchParams;
        if (selectedSearchParams.regions.regionArr.length > 1) {
          this.maplevel = selectedSearchParams.regions.regionArr[0].regionLevel;
        }
        if (selectedSearchParams.regions.regionArr.length == 1) {
          this.maplevel =
            selectedSearchParams.regions.regionArr[0].regionLevel + 1;
        }
        if (this.selectedSearchParams.regions.regionArr.length) {
          this.queryTableData.tableData = [];
          this.selectedSearchParams.regions.regionArr.map(item => {
            let dataItem = { 区划: item.regionName };
            this.queryTableData.tableData.push(dataItem);
            return item;
          });
        }
        this.init();
        this.initSearchValue();
      }
    );
    EventBus.$on(
      "updateMicroSearchItem",
      (microSearchParams, selectedSearchParams) => {
        this.region.rcid = selectedSearchParams.regions.rcid;
        this.selectedSearchParams = selectedSearchParams;
        if (selectedSearchParams.regions.regionArr.length > 1) {
          this.maplevel = selectedSearchParams.regions.regionArr[0].regionLevel;
        }
        if (selectedSearchParams.regions.regionArr.length == 1) {
          this.maplevel =
            +selectedSearchParams.regions.regionArr[0].regionLevel + 1;
        }
        if (this.selectedSearchParams.regions.regionArr.length) {
          this.queryTableData.tableData = [];
          this.selectedSearchParams.regions.regionArr.map(item => {
            let dataItem = { 区划: item.regionName };
            this.queryTableData.tableData.push(dataItem);
            return item;
          });
        }
        this.init();
        this.initSearchValue();
      }
    );
    EventBus.$on("clearMicroAllChart", () => {
      this.num_codes = [];
      (this.numData = []),
        (this.queryTableData = {
          tableLegend: [{ name: "区划", value: "NAME" },{name: "合计", value: "NAME"}],
          tableData: [],
          tableName: ""
        }),
        (this.changeNum = "");
      this.iden_enu_data = [];
    });
    EventBus.$on("table-actiontrigger", this.tableActionTrigger);
    EventBus.$on("table-heighLightOff", this.offHeightlightTable);
    EventBus.$on("tableCode", (num_codes, changeNum) => {
      this.num_codes = num_codes;
      this.changeNum = changeNum;
      this.getSearchSum();
    });
    EventBus.$on("fullScreen", () => {
      this.resetDragStyles();
    });
  },
  beforeDestroy() {
    EventBus.$off("updateMicroSearch");
    EventBus.$off("updateMicroSearchItem");
    EventBus.$off("clearMicroAllChart");
    EventBus.$off("refreshBoundaryFeaturesComplete");
    EventBus.$off("table-actiontrigger");
    EventBus.$off("table-heighLightOff");
    EventBus.$off("tableCode");
    EventBus.$off("fullScreen");
  },
  methods: {
    ...mapMutations([
      "changeEnlargeTable",
      "changeEnlargeChart",
      "changeShowEchartsLayer",
      "changeShowMapTableLayer",
      "changeShowMapControl",
      "changequeryTableData",
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeShowTableLayer",
      "changeShowQueryTableLayer"
    ]),
    vxeTableCellMouseenter({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }){
      if(row["区划"]!="总计"){
        EventBus.$emit("onChart-action", row["区划"]);
        EventBus.$emit("onChartMap", row["区划"]);
      }
    },
    resetDragStyles(){
      let left = document.documentElement.clientWidth - 410;
      $(".drag-data-table-panel").css({"width":"360px","height":"300px","left":left,"top":"200px"})

      this.dragStyles.x = left;
      this.dragStyles.y = 200;
      this.dragStyles.w = 360;
      this.dragStyles.h = 300;
    },
    labelHead(h, { column, $index }) {
      let l = column.label.length + 2;
      let f = 16;
      column.minWidth = f * l;
      if (
        this.queryTableData.tableLegend.length >= 6 ||
        column.realWidth > 300
      ) {
        column.realWidth = column.minWidth;
      }
      return h("div", [column.label]);
    },
    onResize(x, y, width, height) {
      this.dragStyles.x = x;
      this.dragStyles.y = y;
      this.dragStyles.w = width;
      this.dragStyles.h = height;
      this.$refs.xTable.recalculate();
    },
    onDrag(x, y, width, height){
      this.dragStyles.x = x;
      this.dragStyles.y = y;
    },
    //页面初始化
    init() {
      // this.doZoom = false;
      this.changeNum = "";
      this.num_codes = [];
      (this.numData = [{ idenCode: "COUNT", idenName: "单位数量" }]),
        (this.queryTableData.tableLegend = [{ name:"区划", title: "区划", value: "NAME" ,field: "区划"},{name:"总计", title: "总计", value: "NAME",field: "总计"}]);
      if (this.selectedSearchParams.hasOwnProperty("microid")) {
        this.getMicroIden();

      }
      this.iden_enu_data = [];
    },
    watchVxeTableCellMouseLeave(){
      $(".vxe-table--body-wrapper .vxe-table--body tbody").on("mouseleave",function(e){
        EventBus.$emit("offChart-action");
        EventBus.$emit("offChartMap");
      })
    },
    //打开操作信息面板
    openSearchInfo(){
      EventBus.$emit("changeSearchInfoPanelStatus");
    },
    //初始化查询条件
    initSearchValue(){
      let that = this;
      that.searchValue = "";
      let mainconditions = that.selectedSearchParams.mainconditions;
      mainconditions.map(item =>{
        let text = "";
        if(item.hasOwnProperty("valueName")&&item.valueName!=""){
          that.searchValue +=item.valueName+"  ";
        }
      })
    },
    //查询基层指标
    getMicroIden() {
      let that = this;
      let req = {
        miid: that.selectedSearchParams.microid,
        iden_type: ""
      };
      microAPI
        .getSelectedTableIden(req)
        .then(res => {
          if (res.message == "success" && res.data.length > 0) {
            that.iden_enu_data = [{ idenName: "总量", idenCode: "all" }];
            that.iden_num_codes = [];
            (that.numData = [{ idenCode: "COUNT", idenName: "单位数量" }]),
              (that.selected = {
                //选中的数字指标和枚举指标
                iden_num_codes: "COUNT", //数字指标
                iden_num_arr:[],//选中数字指标具体信息
                iden_enu_code: "B0010031", //枚举指标
                iden_enu_index: 0 //选中的枚举指标索引
              });
            let data = res.data;
            for (let i in data) {
              if (data[i].idenType == 2) {
                //数字指标
                that.iden_num_codes.push(data[i].idenCode);
                that.numData.push(data[i]);
              }
              if (data[i].idenType == 4) {
                data[i].data = [];
                that.iden_enu_data.push(data[i]);
              }
            }
            that.selectedSearchData.numData = that.numData;
            that.selectedSearchData.iden_enu_data = that.iden_enu_data;
            that.num_codes = [];
            that.num_codes.push(that.numData[0].idenCode,that.numData[1].idenCode)//默认选中两个数字指标

            that.changeNum = that.iden_enu_data[0].idenCode;
            that.getSearchSum();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //指标或分组改变查询
    getSearchSum() {
      if (this.numData.length) {
        let that = this;
        let iden_enu_code = [];
        let iden_num_codes = JSON.parse(JSON.stringify(that.num_codes));
        if (that.changeNum == "all" || that.changeNum == "") {
          iden_enu_code = [];
        } else {
          iden_enu_code.push(that.changeNum);
        }
        if(iden_num_codes.indexOf("COUNT")!=-1){
          let index = iden_num_codes.indexOf("COUNT");
          iden_num_codes.splice(index,1);
        }
        let req = {
          conditions: that.selectedSearchParams.conditions,
          iden_enu_code: iden_enu_code,
          iden_num_codes: iden_num_codes,
          isRegion: that.changeNum == "all" ? "true" : "both",
          microId: that.selectedSearchParams.microid,
          msConditions: that.selectedSearchParams.msConditions || [],
          periods: that.selectedSearchParams.periods,
          rcid: that.selectedSearchParams.regions.rcid,
          regions: that.selectedSearchParams.regions.regionArr,
          subRegionLevel: this.maplevel >= 7 ? 7 : this.maplevel
        };
        that.querySum(req, function(data) {
          that.getRowSum(function(){
            that.queryTableData.tableData = that.queryTableData.tableData.slice(
              0
            );
            that.selectedSearchData.data = data;
            that.numData.map(item => {
              if (item.idenCode == that.num_codes) {
                that.queryTableData.num_codes = item.idenName;
              }
            });
            that.queryTableData.changeNum = that.changeNum;
            that.getSumData(that.queryTableData,function(sumData){
              that.queryTableData = sumData;
              let queryTableDataStr = JSON.stringify(that.queryTableData);
              let queryTableDataObj = JSON.parse(queryTableDataStr);
              let obj = {
                tableData:queryTableDataObj,
                iden_num_arr:that.selected.iden_num_arr,
              }
              EventBus.$emit("changeMainData", obj);
            });
            setTimeout(() => {
              that.setTableHeaderWidth();
              that.queryTableData.tableLegend = that.queryTableData.tableLegend.slice(0);
              that.watchVxeTableCellMouseLeave();
            }, 300);
          })
        });
      }
    },
    //快速汇总查询
    querySum(req, callback) {
      let that = this;
      axios({
        url: microConfig.summarySearch,
        method: "post",
        params: {
          microId: req.microId
        },
        data: req
      })
        .then(function(response) {
          if (response.data.message == "success") {
            let data = response.data.data;
            let arr = JSON.parse(JSON.stringify(response.data.data));
            //表格数据初始化
            that.queryTableData.tableLegend = [
              { name:"区划", title: "区划",field: "区划", value: "NAME" }
            ];
            that.queryTableData.tableData = [];
            if (data.length > 0) {
              let mapName = [];
              data.map(item => {
                mapName.push(item.NAME);
                return item;
              });
              var newMapName = mapName.filter(function(value, index, self) {
                return self.indexOf(value) === index;
              });
              newMapName.map(item => {
                let dataItem = { 区划: item };
                that.queryTableData.tableData.push(dataItem);
                return item;
              });
            }
          
            that.selected.iden_num_arr = [];
            that.numData.map(num => {//保存选中数字指标
              that.num_codes.map(numcode=>{
                if(num.idenCode==numcode){
                  that.selected.iden_num_arr.push({
                    name:num.idenName,
                    value: num.idenCode
                  })
                }
              })
            });
           
            let tableData = that.queryTableData.tableData;
            //表格赋值
            if (that.changeNum == "all") {//总量分组
              that.numData.map(num => {
                that.num_codes.map(numcode=>{
                  if(num.idenCode==numcode){
                    that.queryTableData.tableLegend.push({
                      name:num.idenName,
                      title:num.idenName,
                      field:num.idenName,
                      value: num.idenCode
                    })
                  }
                })
              });

              tableData.map(item => {
                data.map(ite => {
                  if (ite.NAME == item["区划"]) {
                    item.region = {
                      regionname:ite.NAME,
                      regioncode:ite.CODE,
                      id:'',
                      rcid:that.region.rcid
                    }
                    that.selected.iden_num_arr.map(code=>{
                      item[code.name] = ite[code.value];
                    })
                    that.selected.iden_num_arr.map(code=>{
                      if (!item[code.name]) {
                        item[code.name] = "-";
                      }
                    })
                  }
                  return ite;
                });
                return item;
              });
             
              callback(data);
            } else {//非总量分组的表头格式：指标-分组值
              that.getTableHeader(function(){
                if (tableData.length) {
                  tableData.map(item => {
                    if (data.length) {
                      data.map(ite => {
                        if (ite.NAME == item["区划"]) {
                          item.region = {
                            regionname:ite.NAME,
                            regioncode:ite.CODE,
                            id:'',
                            rcid:that.region.rcid
                          }
                          that.queryTableData.tableLegend.map(header=>{
                            if(header.hasOwnProperty("numcode")){//和头部数字指标匹配
                              let children = header.children;
                              children.map((headchild)=>{
                                if(ite.ACODE ==headchild.idenCode){//和头部分组代码匹配
                                  item[headchild.name] = (ite[header.numcode]!=null&&ite[header.numcode]!="")?ite[header.numcode]:'-'
                                }
                              })
                               
                            }
                          });
                        }
                        return ite;
                      });

                    }
                    return item;
                  });
                }
                callback(data);
              });
            }
            that.zoomendfunc();

          } else {
            that.$message({
              message: response.data.message,
              type: "error"
            });
            return;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //计算行总计
    getRowSum(callback){
      let that = this;
      let table = that.queryTableData.tableData;
      for(let i in table){
        let obj = table[i];
        for(let k in that.selected.iden_num_arr){//分数字指标总计
          let numName = that.selected.iden_num_arr[k].name;
          let sum = 0; 
          for(let j in obj){
            if(j.indexOf(numName)!=-1&&typeof Number(obj[j]) === 'number' && !isNaN(Number(obj[j]))){
              sum+=Number(obj[j]);
            }
          }
          table[i][numName+"-总计"] = sum;
        }
      }
      that.queryTableData.tableData = table;
      callback();
    },
    //计算列总计数据
    getSumData(obj,callback){
      let tableLegend = obj.tableLegend;
      let tableData = obj.tableData;
      let sumobj = {
        "区划":"总计"
      };
      for(let i in tableLegend){
        if(tableLegend[i].hasOwnProperty("children")){//非总量分组
          let childLegend = tableLegend[i].children;
          childLegend.map((item)=>{
            let per = item.name;
            let itemSum = 0;
            for(let j in tableData){
              let value = tableData[j][per];
              if(value!=""&&value!="-"&&typeof Number(value) === 'number'&& !isNaN(Number(value)) ){
                itemSum += Number(value);
              }
            }
            sumobj[per]=itemSum;
          });
        }else if(tableLegend[i].name!="区划"&&!tableLegend[i].hasOwnProperty("children")){//总量分组
          let per = tableLegend[i].name;
          let itemSum = 0;
          for(let j in tableData){
            let value = tableData[j][per];
            if(value!=""&&value!="-"&&typeof Number(value) === 'number'&& !isNaN(Number(value)) ){
              itemSum += Number(value);
            }
          }
          sumobj[per]=itemSum;
        }
      }
      obj.tableData.unshift(sumobj)
      callback(obj);
    },
    //监听地图缩放
    zoomendfunc() {
      let that = this;
      const map = sgisMapBase.getMap();
      let _zoom;
      if(map.clusterLayerDBclick){
        map.off("zoomend")
        return;
      }
      map.off("zoomend").on("zoomend", function() {
        if(map.clusterLayerDBclick){
          map.off("zoomend");
          return;
        }
        _zoom = Math.round(map.getZoom());
        if (!that.doZoom) {
          if (that.map.currentZoom == _zoom) {
            return;
          } else {
            const maplevel = _zoom;
            let parentsRegion = sgisRegionBase.regionUtils.getRegionCodeByLevelAndCode(
              that.selectedSearchParams.regions.regionArr[0].regionCode,
              maplevel
            );
            let newpylevel = parentsRegion.level + 1;
            if (
              that.maplevel != newpylevel &&
              !(
                newpylevel <
                that.selectedSearchParams.regions.regionArr[0].regionLevel
              )
            ) {
              that.maplevel = newpylevel;
              // if(that.selectedSearchParams.regions.regionArr[0].regionLevel == that.maplevel){
              //   that.maplevel += 1
              // }
              if (!that.doZoom) {
                that.getSearchSum();
              }
            }
            that.map.currentZoom = _zoom; //重置地图等级
          }
        }
      });
    },
    //获取非总量分组表头数据
    getTableHeader(callback) {
      let that = this;
      let req = {};
      if (that.iden_enu_data.length) {
        that.iden_enu_data.map(item => {
          if (item.idenCode === that.changeNum) {
            req = {
              mid: item.identid,
              vid: item.identVersion
            };
          }
          return item;
        });
      }
      if(req.hasOwnProperty("mid")&&req.hasOwnProperty("vid")){
        microAPI.selectRoot(req).then(res => {
          if (res.message == "success") {
            let arr = res.data;
            that.queryTableData.tableLegend = [
              { name:"区划" ,title: "区划",field:"区划", value: "NAME" }
            ];
            if (arr.length) {
              that.selected.iden_num_arr.map(numitem =>{
                let numDataObj = {//每一大类分组数据可进行总计
                  name:numitem.name,
                  title:numitem.name,
                  children: [{
                    name:numitem.name+'-总计', 
                    title: "总计", 
                    field:numitem.name+'-总计', 
                    value:"SUM",
                    numcode:numitem.value,//数字code
                  }],
                  numcode:numitem.value,//数字code
                }
                arr.map(item => {
                  let headerItem = { 
                    name:numitem.name+'-'+item.name, 
                    title: item.name, 
                    field:numitem.name+'-'+item.name, 
                    value:numitem.value+'-'+item.code,
                    numcode:numitem.value,//数字code
                    idenCode:item.code//分组code
                  };
                  numDataObj.children.push(headerItem)
                })
                that.queryTableData.tableLegend.push(numDataObj);
              });
            }
            callback();
          }
          that.setTableHeaderWidth();
        });
      }
    },
    //设置表头宽度
    setTableHeaderWidth() {
      let tableWidth = 0;
      this.queryTableData.tableLegend.map(item => {
        if(!item.hasOwnProperty("children")){//没有子层
          let width = (item.title.length + 2) * 16;
          let tableData = JSON.parse(JSON.stringify(this.queryTableData.tableData));
          tableData.map(ite => {
            if (ite[item.title]) {
              let iteWidth = ((ite[item.title]).toString().length + 2) * 16;
              if (iteWidth > width) {
                width = iteWidth;
              }
            }
          });
          item.width = width.toString();
          tableWidth += Number(item.width);
          return item;
        }else{//多分组
          let childHead = item.children;
          childHead.map((childItem)=>{//针对每一种分组值求宽度
            let tableData = JSON.parse(JSON.stringify(this.queryTableData.tableData));
            let width = (childItem.title.length + 2) * 16;
            tableData.map(ite => {
              if (ite[childItem.name]) {
                let iteWidth = ((ite[childItem.name]).toString().length + 2) * 16;
                if (iteWidth > width) {
                  width = iteWidth;
                }
              }
            });
            childItem.width = width.toString();
          })
          tableWidth += Number(item.width);
          return item;
        }
      });
      this.tableWidth = (tableWidth + 20).toString();
    },
    //双击更新区划下钻
    updateRegion({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }){
      let updateRegion = [row.region];
      EventBus.$emit("changeToolRegion", updateRegion);
    },
    close() {
      this.$emit("close");
    },
    //高亮联动
    tableActionTrigger(data) {
      if (this.$refs.xTable) {
        let regionName = data;
        let tableData = this.$refs.xTable.data;
        let index = 0;
        tableData.map((item, i) => {
          if (item["区划"] == regionName) {
            index = i;
          }
        });
        let hoverRow = tableData[index];
        //当前格子>5说明格子是在滚动条下:
        //5:当前表格内可以看到的行数  3-144 测试滚动
        //36行高
        if (++index > 4) {
          document.getElementsByClassName(
            "vxe-table--body-wrapper "
          )[0].scrollTop = (index - 3) * 36;
        } else {
          document.getElementsByClassName(
            "vxe-table--body-wrapper "
          )[0].scrollTop = 0;
        }
        this.$refs.xTable.setCurrentRow(hoverRow)
      }
    },
    //移除表格高亮
    offHeightlightTable(data) {
      if (this.$refs.xTable) {
        this.$refs.xTable.setCurrentRow();
      }
    },
    changeSize() {
      this.$store.commit("changeEnlargeChart", false);
      this.$store.commit("changeEnlargeTable", true);
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowMapTableLayer", false);
      this.$store.commit("changeShowEchartsLayer", false);
      EventBus.$emit("tableMainCodes", this.num_codes, this.changeNum);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.table-container {
  box-sizing: border-box;
  padding: 10px;
  height: calc(100% - 90px);
  overflow: hidden;
  min-height:355px;
}
.data-table {
  // position: absolute;
  // top: 250px;
  /*right: 46px;*/
  // width: 360px;
  height: 100%;
  font-size: 1.4rem;
  z-index: 999;
  background: $panelContentBg;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    color: $fontColorW;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    p{
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-size: 1.4rem;
      font-weight: normal;
      overflow: hidden;
      width: 82%;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    .close {
      float: right;
      line-height: 35px;
      margin-right: 8px;
      cursor: pointer;
      color: #fff;
    }
  }
  .el-table {
    max-width: inherit;
    width: inherit;
    min-width: 100%;
  }
  .nav {
    height: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    .pos {
      float: left;
      line-height: 45px;
    }
  }
  .table-content {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    .table-data {
      position: absolute;
      min-width: 100%;
      height: 100%;
    }
  }
  .el-select-dropdown__wrap {
    max-height: 200px;
  }

}
</style>
<style rel="stylesheet/scss" lang="scss" >
@import "../css/rule.scss";

.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: rgba(255, 138, 61, 0.7);
  color: $fontColorW;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 138, 61, 0.7);
  color: $fontColorW;
}
.table-head {
  font-size: 1.4rem !important;
  line-height: 25px !important;
  display: flex !important;
}
// ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
//   height: 10px;
// }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #107089 !important;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}

.el-select-dropdown {
  background-color: rgba(23, 128, 154, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(23, 128, 154, 0.8);
  top: 0;
  // border-color: rgba(23,128,154,0.8);
}
.el-select-dropdown__item {
  color: rgba(255, 255, 255, 0.6);
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(255, 138, 61, 0.7);
}
.el-select-dropdown__item.selected {
  color: rgba(255, 255, 255, 0.6);
}

.data-table {
  .el-input--small .el-input__inner {
    background: #17809a !important;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .el-select__tags{
    .el-tag--info{
      background-color: #27869e;
      border-color: #27869e;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
      margin-left: 4px;
    }
    .el-tag__close{
      color: rgba(255, 255, 255, 0.8);
    }
  }
  .el-table th,
  .el-table td,
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(23, 128, 154, 0.8);
    color: rgba(255, 255, 255, 0.6);
  }
  .el-table {
    background-color: transparent;
  }
  .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .el-table__empty-text {
    color: rgba(255, 255, 255, 0.6);
  }
  .el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(255, 138, 61, 0.7);
  }

  .el-table__header,
  .el-table__body {
    width: 100% !important;
    table-layout: auto !important;
  }
  .gutter{
    width: 6px!important;
  }
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  background-color: $colorBackgroundActive;
  color:$fontColorLimit;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
   background-color: $colorBackgroundActive;
   color:$fontColorLimit;
}
#data-table {
  .el-table__body-wrapper {
    height: calc(100% - 36px) !important;
  }
  .el-table__empty-block {
    width: 100% !important;
  }
  .table-container{
    .vxe-grid{
      .vxe-header--column{
        line-height: 18px;
      }
      .vxe-table--header-wrapper{
        color:$fontColorLimit;
        background: rgba(23, 128, 154, 0.8);
        .vxe-table--header-border-line{
          border-bottom: 1px solid #e8eaec5e;
        }
        .vxe-cell--title{

        }
      }
      .vxe-table--body-wrapper{
        color:$fontColorLimit;
        background: rgba(23, 128, 154, 0);
        .vxe-body--row.row--stripe{
        }
        .vxe-body--row{
          background: rgba(23, 128, 154, 0);
        }
        .vxe-body--row.row--hover{
          background-color: $colorBackgroundActive;
          color:$fontColorLimit;
        }
      }
      .vxe-body--row.row--current{
        background-color: $colorBackgroundActive;
        color:$fontColorLimit;
      }
      .vxe-table.border--full .vxe-body--column, .vxe-table.border--full .vxe-footer--column, .vxe-table.border--full .vxe-header--column{
        background-image: -webkit-gradient(linear,left top,left bottom,from(#fbfdfd30),to(#fbfdfd30)),-webkit-gradient(linear,left top,left bottom,from(#fbfdfd30),to(#fbfdfd30));
        background-image: linear-gradient(#fbfdfd30,#fbfdfd30),linear-gradient(#fbfdfd30,#fbfdfd30);
      }
      .vxe-table--border-line{
        border: 1px solid #fbfdfd30;
      }
    }
  }
}

.draggable {
  .my-handle-class {
    width: 10px;
    height: 10px;
    background: transparent;
    position: absolute;
  }
  .my-handle-class-tl {
    z-index: 999;
    cursor: nw-resize;
  }
  .my-handle-class-tm {
    width: 100%;
    cursor: n-resize;
  }
  .my-handle-class-tr {
    top: 0;
    right: 0;
    z-index: 999;
    cursor: ne-resize;
  }
  .my-handle-class-mr {
    height: 100%;
    right: 0;
    cursor: e-resize;
  }
  .my-handle-class-br {
    bottom: 0;
    right: 0;
    z-index: 999;
    cursor: se-resize;
  }
  .my-handle-class-bm {
    bottom: 0;
    width: 100%;
    cursor: s-resize;
  }
  .my-handle-class-bl {
    bottom: 0;
    left: 0;
    z-index: 999;
    cursor: sw-resize;
  }
  .my-handle-class-ml {
    height: 100%;
    cursor: e-resize;
  }
}
.idenNumSelectPopper{
    .el-select-dropdown__item.selected::after{
        right: 8px!important;
    }
}
</style>
